<template>
  <div class="content">
    <dw-menu/>
    <main class="ml-64 flex-1 p-6 bg-gray-100 min-h-screen">
      <el-card shadow="never" style="margin-bottom: 10px">
        <header class="flex justify-between items-center mb-6">
          <div>
            <h1 class="text-3xl font-bold text-gray-800">岗位管理中心</h1>
            <p class="text-sm text-gray-500 mt-1">当前有效岗位
              {{ filteredPositions.filter(item => item.qydm === 1).length }} 个</p>
          </div>
          <div class="flex items-center space-x-4">
            <el-button icon="el-icon-s-tools" type="text" @click="GwTypePopup">岗位标签</el-button>
            <el-button icon="el-icon-s-tools" type="text" @click="showFLGLPopup">福利待遇</el-button>
            <el-button icon="el-icon-plus" type="text" @click="addGw">发布新岗位</el-button>
            <el-button icon="el-icon-edit" type="text" @click="eiditGw">编辑岗位</el-button>
            <el-button icon="el-icon-search" type="text" @click="lookGw">查看岗位详情</el-button>
            <el-dropdown trigger="click">
              <el-button icon="el-icon-download"></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>导出当前列表</el-dropdown-item>
                  <el-dropdown-item>导出全部数据</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </header>
      </el-card>
      <el-row :gutter="20" class="mb-6">
        <el-col :span="8">
          <el-card class="stat-card " shadow="never">
            <div class="flex justify-between items-center">
              <div>
                <div class="text-gray-500 text-sm">总申请数</div>
                <div class="text-3xl font-bold mt-2">2,345</div>
                <div class="text-green-500 text-sm mt-1">
                  <i class="el-icon-top"></i> 12% 周环比增长
                </div>
              </div>
              <el-progress :percentage="76" :width="100" color="#67C23A" type="dashboard">
                <span class="text-gray-500">转化率</span>
              </el-progress>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card " shadow="never">
            <div class="flex justify-between items-center">
              <div>
                <div class="text-gray-500 text-sm">热门岗位 TOP3</div>
                <div class="mt-3">
                  <div v-for="(item, index) in hotPositions" :key="index" class="text-sm">
                    <span class="mr-2">#{{ index + 1 }}</span>
                    {{ item.name }}
                    <el-tag size="mini">{{ item.count }}</el-tag>
                  </div>
                </div>
              </div>
              <i class="el-icon-trophy text-4xl text-yellow-500"></i>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card" shadow="never">
            <div class="flex justify-between items-center h-full">
              <div>
                <div class="text-gray-500 text-sm">平均处理时效</div>
                <div class="text-3xl font-bold mt-2">2.3天</div>
                <div class="text-sm text-gray-500 mt-1">行业平均 3.1天</div>
              </div>
              <el-progress :percentage="85" :width="80" color="#E6A23C" type="circle"></el-progress>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 岗位管理表格 -->
      <el-card class="main-table" shadow="never">
        <template #header>
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-4">
              <el-input
                  v-model="searchKey"
                  clearable
                  placeholder="搜索岗位名称/编号"
                  style="width: 240px">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <el-select
                  v-model="filterStatus"
                  clearable
                  placeholder="状态筛选"
                  style="width: 120px">
                <i slot="prefix" class="el-input__icon el-icon-refresh"></i>
                <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-date-picker
                  v-model="dateRange"
                  end-placeholder="结束日期"
                  range-separator="至"
                  start-placeholder="开始日期"
                  type="daterange">
              </el-date-picker>
            </div>
            <div class="flex items-center space-x-2">
              <el-button type="text" @click="toggleAdvancedSearch">
                高级筛选 <i :class="advancedSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              </el-button>
              <el-button icon="el-icon-refresh"></el-button>
            </div>
          </div>
        </template>
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="paginatedPositions"
            :row-class-name="tableRowClassName"
            border
            element-loading-background="rgba(255, 255, 255, 0.8)"
            element-loading-spinner="el-icon-loading"
            element-loading-text="加载中..." highlight-current-row stripe
            style="width: 100%"
            tooltip-effect="dark"
            @current-change="handleCurrentChangeTable"
            @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="岗位ID" prop="ID" width="100"></el-table-column>
          <el-table-column fixed="left" label="审核状态" prop="SHZT" width="120">
            <template #default="scope">
              <span>
                <i :class="scope.row.SHZT ==='已审核通过'? 'el-icon-check' : 'el-icon-close'"
                   :style="{ color: scope.row.SHZT === '已审核通过' ? 'green' : 'red', marginRight: '5px' }"></i>
                {{ scope.row.SHZT }}
              </span>
            </template>
          </el-table-column>
          <el-table-column :formatter="formatText" label="岗位名称" prop="GWMC" width="120"/>
          <el-table-column :formatter="formatText" label="岗位描述" prop="GWMS" width="180"/>
          <el-table-column :formatter="formatText" label="岗位要求" prop="GWYQ" width="180"/>
          <el-table-column label="岗位分类" prop="FLMC" width="100"/>
          <el-table-column :width="180" label="岗位发布时间" prop="FBSJ" sortable>
            <template #default="scope">
              {{ fbsjToDate(scope.row.fbsj) }}
            </template>
          </el-table-column>
          <el-table-column :formatter="formatText" label="投递说明" prop="TDSM"></el-table-column>
          <el-table-column :formatter="(row) => row.ZGXZ + '元/月'" label="最高薪资" prop="ZGXZ" sortable
                           width="100"></el-table-column>
          <el-table-column :formatter="(row) => row.ZDXZ + '元/月'" label="最低薪资" prop="ZDXZ" sortable
                           width="100"></el-table-column>
          <el-table-column label="最低学历要求" prop="ZDXLYQ"/>
          <el-table-column :formatter="formatText" label="工作地点" prop="GZDD"/>
          <el-table-column label="工作省份" prop="GZSF"/>
          <el-table-column label="实习标志" prop="SXBZ">
            <template #default="scope">
              {{ scope.row.SXBZ === 1 ? "实习岗位" : "正式岗位" }}
            </template>
          </el-table-column>
          <el-table-column :formatter="formatText" label="专业限制" prop="ZYXZ"></el-table-column>
          <el-table-column :formatter="formatText" label="单位名称" prop="DWMC"></el-table-column>
          <el-table-column :formatter="formatText" label="投递次数" prop="TDCS"></el-table-column>
          <el-table-column :formatter="formatText" label="招聘人数" prop="ZPRS"></el-table-column>
          <el-table-column fixed="left" label="启用状态" prop="QYDM">
            <template #default="scope">
                <span>
                  <i :class="scope.row.QYDM === 1 ? 'el-icon-check' : 'el-icon-close'"
                     :style="{ color: scope.row.QYDM === 1 ? 'green' : 'red', marginRight: '5px' }"></i>
                  {{ scope.row.QYDM === 1 ? "启用" : "关闭" }}
                </span>
            </template>
          </el-table-column>
          <el-table-column align="right" fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button size="mini" @click="ShowJobDetail(scope.row)">岗位详情</el-button>
              <el-button v-if="scope.row.QYDM === 1" size="mini" type="danger" @click="changeStatus(scope.row,0)">
                下线岗位
              </el-button>
              <el-button v-if="scope.row.QYDM === 0" size="mini" type="success" @click="changeStatus(scope.row,1)">
                启用岗位
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-between items-center mt-4">
          <div>
            <el-button size="mini" @click="batchOffline">批量下线</el-button>
            <el-button size="mini">批量启用</el-button>
          </div>

          <el-pagination
              :current-page.sync="currentPage"
              :page-size.sync="pageSize"
              :page-sizes="[ 4, 5, 8,10 , 13]"
              :total="total"
              background
              layout="total, sizes, prev, pager, next"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange">
          </el-pagination>
        </div>
      </el-card>
      <!--福利管理弹窗-->
      <el-dialog :visible.sync="isshowFLGLPopup" title="福利管理" width="900px">
        <div style="position: relative;left: 139px;">
          <el-select v-model="selectGwID" clearable filterable placeholder="请选择岗位" @change="FLGWChange">
            <el-option label="请选择" value="-1"></el-option>
            <el-option
                v-for="(item) in allJobData"
                :key="item.ID"
                :label="item.ID + '-' + item.GWMC + '-' + item.DWMC"
                :value="item.ID">
            </el-option>
          </el-select>
          <br>
          <el-transfer
              v-model="selectedItems"
              :data="benefits"
              :filterable="true"
              :props="transferProps"
              :titles="['可选福利', '已选福利']"
              @change="FLhandleChange"
          />
          <el-steps :active="active" :space="500" finish-status="success" style="margin-top: 40px;">
            <el-step title="选择岗位"></el-step>
            <el-step title="选择福利"></el-step>
            <el-step title="提交保存"></el-step>
          </el-steps>
          <el-button style="margin-top: 10px;" type="info" @click="FLsubmitSelection">提交选择</el-button>
        </div>


      </el-dialog>
      <!--岗位标签管理弹窗-->
      <el-dialog
          :visible.sync="dialogVisible"
          title="岗位标签管理"
          width="500px"
          @close="handleDialogClose"
      >
        <div>
          <div class="tag-input-wrapper">
            <div class="tags">
              <span
                  class="tag"
                  v-for="(tag, index) in getTages"
                  :key="index">
                {{ tag.bqnr }}
              </span>
            </div>
          </div>
        </div>

        <div v-if="editableTags.length">
          <div
              v-for="(tag, index) in editableTags"
              :key="tag.id"
              style="margin: 10px 0; display: flex; align-items: center;">
            <el-input
                v-model="tag.bqnr"
                placeholder="请输入标签内容"
                style="flex: 1; margin-right: 10px;"
            />
            <el-button
                circle
                icon="el-icon-delete"
                type="danger"
                @click="removeTag(index)"
            />
          </div>
        </div>
        <div v-if="getTages.length === 0" style="color: #999; padding: 20px 0;">暂无标签</div>
        <el-button type="text" @click="addTag">+ 添加标签</el-button>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">关闭</el-button>
      </span>
      </el-dialog>
    </main>
  </div>
</template>
<script>
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import DwMenu from "@/components/dw/Dw_menu.vue";
import axios from "axios";
import dayjs from 'dayjs'

export default {
  components: {DwMenu, ECharts},
  name: 'DwJob',
  data() {
    return {
      dialogVisible: false,
      tags: [],
      editableTags: [], // 弹窗内使用的临时拷贝
      getTages:[],// 所有标签数据


      benefits: [        // 可选的福利列表
      ],
      transferProps: {
        key: 'key',
        label: 'label',
      },
      selectGwID: null, // 选择的岗位ID
      active: 0, // 当前步骤
      selectedItems: [], // 已选福利
      selectGwdm: null,// 选择的岗位ID
      isshowFLGLPopup: false,
      loading: false,
      hotPositions: [
        {name: '高级前端工程师', count: 235},
        {name: '产品经理', count: 189},
        {name: 'UI设计师', count: 156}
      ],
      UserInfo: {}, // 登录用户信息
      searchKey: '',
      filterStatus: null, // 状态筛选
      dateRange: [],
      advancedSearch: false,
      selectedPosition: null,
      drawerVisible: false,
      currentPage: 1,
      pageSize: 4, // 更新每页显示条数为 5
      total: 0,
      paginatedData: [],//
      allJobData: [], // 所有岗位数据
      statusOptions: [
        {value: 1, label: '启用'},
        {value: 0, label: '禁用/下线'},
        {value: 3, label: '已投递满'}
      ],
      AllFuLiDataList: [], // 所有福利数据
      // 当前选中岗位数据
      currentJobSelectRow: null,
      selectedRows: [],// 选中的行
    };
  },
  computed: {
    filteredPositions() {
      return this.paginatedData.filter(item => {
        return (
            (!this.searchKey || item.GWMC.includes(this.searchKey)) &&
            (!this.filterStatus || (item.QYDM === this.filterStatus))
        );
      });
    },
    paginatedPositions() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredPositions.slice(start, end);
    }
  },
  mounted() {
    this.getLoginUser();// 获取登录用户信息
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    GwTypePopup() {
      this.dialogVisible = true;
      if (this.editableTags.length === 0) {
        this.getAllTags();
      }
    },
    getAllTags() {
      if (this.currentJobSelectRow === null) {
        this.$message.warning("请先选择岗位！");
        return;
      }
      axios.get("/dataGwdmk/getGangWeiLabel?gwdm=" + this.currentJobSelectRow.ID).then((res) => {
        if (res.data.result) {
          this.getTages = res.data.data;
        } else {
          this.$message.error("获取岗位标签失败:" + res.data.msg);
        }
      }).catch((err) => {
        this.$message.error("获取岗位标签失败:" + err.message);
      });
    },
    addTag() {
      this.editableTags.push({
        id: Date.now(), // 或者用 UUID，避免重复
        bqnr: ''
      });
    },
    removeTag(index) {
      this.editableTags.splice(index, 1);
    },
    handleDialogClose() {
      // 把修改后的标签同步回主数据
      this.tags = JSON.parse(JSON.stringify(this.editableTags));
      this.dialogVisible = false;
      // 可选：调用保存接口
      console.log('保存标签：', this.tags);
      // axios.post('/api/saveTags', this.tags)
      for (let i = 0; i < this.tags.length; i++) {
        let dataForm = new FormData();
        dataForm.set("gwdm", this.currentJobSelectRow.ID);
        dataForm.set("bqnr", this.tags[i].bqnr);
        dataForm.set("cjryhm", this.UserInfo.username)
        dataForm.set("cjryhsfdm", 3)
        axios.post("/dataGwdmk/addGangWeiLabel", dataForm).then((res) => {
          if (res.data.result) {
            console.log("标签保存成功！");
          } else {
            this.$message.error("标签保存失败！，后台错误")
          }
        }).catch((err) => {
          this.$message.error("标签保存失败！，网络错误")
        });
      }
    },
    changeStatus(row, status) {
      // 判断是否重复操作
      if (row.QYDM === status) {
        this.$message.warning(`此岗位已${status === 0 ? '下线' : '上线'}，请勿重复操作！`);
        return;
      }

      // 动态提示文字
      const actionText = status === 0 ? '下线' : '上线';
      const btnColor = status === 0 ? 'btn-orange' : 'btn-green';
      const confirmColor = status === 0 ? 'orange' : 'green';

      $.confirm({
        title: `⚠️ 确认${actionText}`,
        content: `你确定要${actionText}该岗位吗？`,
        type: confirmColor,
        icon: 'fa fa-question-circle',
        buttons: {
          确定: {
            text: `是的，${actionText}`,
            btnClass: btnColor,
            action: () => {
              const formData = new FormData();
              formData.set("id", row.ID);
              formData.set("qydm", status);

              axios.post("/dataGwdmk/updateGangWei", formData)
                  .then((res) => {
                    if (res.data.result) {
                      this.$message.success(`岗位已成功${actionText}！`);
                      this.getAllJob(); // 刷新岗位列表
                    } else {
                      this.$message.error(`${actionText}失败：${res.data.msg}`);
                    }
                  })
                  .catch((err) => {
                    this.$message.error(`${actionText}失败：${err.message}`);
                  });
            }
          },
          取消: {
            text: '取消',
            btnClass: 'btn-default'
          }
        }
      });
    },
    // 单击福利管理按钮
    showFLGLPopup() {
      this.isshowFLGLPopup = true;
      //获取福利数据
      if (this.AllFuLiDataList.length === 0) {
        this.getAllFLData();
      }
      this.active = 0;
      // 获取启用的岗位数据
      this.QYGWList = this.posts.filter(item => item.qydm === 1);
      console.log("启用的岗位数据：");
      console.log(this.QYGWList);
      console.log("打印成功！：");
    },
    FLhandleChange(newTargetKeys) {
      if (this.selectGwID === null) {
        this.$message.info("请先选择岗位！");
        return;
      }
      console.log('已选福利:', newTargetKeys);
      this.active = 2;
    },
    //获取福利数据
    getAllFLData() {
      axios.get("fl/getAllFLData").then((res) => {
        if (res.data.result) {
          this.AllFuLiDataList = res.data.data;
          this.benefits = this.AllFuLiDataList.map(item => {
            return {
              key: item.fldm,
              label: item.flmc,
            }
          });
          console.log("获取福利数据成功！")
        } else {
          this.$message.error("获取福利数据失败！，后台错误")
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    jobFldy() {
      this.isshowFLGLPopup = true;
    },
    fbsjToDate(fbsj) {
      return dayjs(fbsj).format('YYYY-MM-DD')
    },
    // 查看岗位详情
    lookGw() {
      // 获取当前行数据
      if (this.currentJobSelectRow === null) {
        //使用 Jquery confirm 弹窗提示
        this.currentJobSelectRow = null;
        this.$confirm('请选择需要查看的岗位！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('确定');
        }).catch(() => {
          console.log('取消');
        });
      } else {
        console.log("跳转到岗位详情页面");
        console.log(this.currentJobSelectRow.id);
        this.$router.push({path: '/dw/jobDetail', query: {id: this.currentJobSelectRow.ID}})
      }
    },
    // 编辑岗位
    eiditGw() {
      // 获取当前行数据
      if (this.currentJobSelectRow === null) {
        $.confirm({
          title: '提示',
          content: '请选择需要编辑的岗位！',
          type: 'orange', // warning 样式
          buttons: {
            确定: {
              btnClass: 'btn-orange',
              action: () => {
                console.log("用户点击了确定");
                // 这里可以执行编辑操作
              }
            },
            取消: () => {
              console.log("用户点击了取消");
            }
          }
        });
      } else {
        console.log("跳转到编辑岗位页面");
        console.log(this.currentJobSelectRow.ID);
        this.$router.push({path: '/dw/DwJobEditView', query: {id: this.currentJobSelectRow.ID}})
      }
    },
    // 高级筛选
    toggleAdvancedSearch() {
    },
    // 提交选择的福利
    async FLsubmitSelection() {
      if (this.selectGwID === null) {
        this.$message.error("请先选择岗位！");
        this.selectedItems = [];
        return;
      }
      console.log('提交的福利:', this.selectedItems);
      console.log('选择的岗位ID:', this.selectGwID);
      let clearGwflData = new FormData();
      clearGwflData.set("gwdm", this.selectGwID);
      // 清空已选福利
      await axios.post("/fl/clearGwflByGWDM", clearGwflData).then((response) => {
        if (response.data.result) {
          console.log("清空岗位对应的福利成功！");
        } else {
          this.$message.error("清空岗位对应的福利失败！，后台错误")
          return;
        }
      }).catch((error) => {
        console.log(error);
        this.$message.error("清空岗位对应的福利失败，网络错误")
        return;
      })

      let erroNUm = 0;
      for (let i = 0; i < this.selectedItems.length; i++) {
        console.log(this.selectedItems[i]);
        let submitData = new FormData();
        submitData.append("fldm", this.selectedItems[i]);
        submitData.append("gwdm", this.selectGwID);
        await axios.post("/fl/gwfldy", submitData).then((response) => {
          console.log(response);
          if (response.data.result) {
            console.log("福利:" + this.selectedItems[i] + "和岗位:" + this.selectGwID + "绑定成功！");
          } else {
            erroNUm++;
            this.$message.error("提交失败！，后台错误")
          }
        }).catch((error) => {
          console.log(error);
          this.$message.error("提交失败，网络错误")
        })
      }

      if (erroNUm === 0) {
        this.$message.success("提交成功！");
      } else {
        this.$message.error("提交失败！，" + erroNUm + "个福利绑定失败！");
      }
      this.active = 3
    },
    // 前往编辑岗位页面
    addGw() {
      this.$router.push('/dw/addJob');
    },
    tableRowClassName({row, rowIndex}) {
      // console.log("渲染行样式");
      //console.log(row);
      //  console.log(rowIndex);
      if (rowIndex === 1) {
        // console.log("渲染第一行样式！！！");
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    getLoginUser() {
      this.loading = true;
      axios.get('/user/checkSession').then(response => {
        if (response.data.result) {
          /* {"result":true,"role":"单位","YHSFDM":3,"name":"Elon Reeve Musk","username":"msk"}*/
          this.UserInfo = response.data;
          this.getAllJob();
        } else {
          this.$message.error("当前用户未登录，请先登录！");
          this.$router.push('/dw/login');
        }
      }).catch(error => {
        console.log(error);
      });
    },
    FLGWChange(GWID) {
      if (this.selectGwID == -1) {
        this.selectedItems = [];
        this.active = 1;
        this.$message.info("请先选择岗位！");
        return;
      }
      console.log("选择的岗位ID:", GWID);
      // 清空已选福利
      this.selectedItems = [];
      // 获取岗位对应的福利
      axios.get("/fl/getGwflByGWDM?gwdm=" + GWID).then((response) => {
        if (response.data.result) {
          console.log("获取岗位对应的福利成功！")
          // 遍历福利
          for (let i = 0; i < response.data.data.length; i++) {
            this.selectedItems.push(response.data.data[i].fldm);
          }
          this.active = 1;
        } else {
          this.$message.error("获取岗位对应的福利失败！，后台错误")
          console.log("获取岗位对应的福利失败！")
        }
      }).catch((error) => {
        console.log(error);

        if (this.selectGwID === -1) {
          this.selectedItems = [];
          this.active = 1;
          this.$message.info("请先选择岗位！");
        } else {
          this.$message.error("获取岗位对应的福利失败：" + error.message);
        }

      });
    },
    getAllJob() {
      this.loading = true;
      axios.get("/dataGwdmk/getGwdmkDataToInterface", {
        params: {
          IsJustOne: 0,
          gwdm: 0,
          QYDM: 2,
          IsByFBZ: 1,
          FBZ: this.UserInfo.username,
          SXBZ: 2,
          SHBZ: 2,
        }
      }).then(res => {
        if (res.data.result) {
          this.paginatedData = res.data.data;
          this.allJobData = res.data.data;
          this.total = this.filteredPositions.length; // 设置总数
          // 重新根据发布时间排序
          this.paginatedData.sort((a, b) => new Date(b.FBSJ) - new Date(a.FBSJ));
          this.loading = false;
        } else {
          console.error('获取职位信息失败,网络错误：' + res.data.msg);
          this.$message.error('获取职位信息失败:' + res.data.msg);
        }
      }).catch(error => {
        console.error('获取职位信息失败,网络错误！', error);
        this.$message.error('获取职位信息失败:' + error.message);
      });
    },
    openPositionDialog() {
      // 打开新建岗位对话框
    },
    batchOffline() {
      // 批量下线逻辑
    },
    // 选中行修改事件
    handleCurrentChangeTable(currentRow) {
      /*  console.log("当前选中行：", currentRow);*/
      this.currentJobSelectRow = currentRow;
    },
    formatText(row, column, cellValue) {
      return cellValue.length > 25 ? cellValue.slice(0, 10) + '...' : cellValue;
    },
    ShowJobDetail(row) {
      // 查看岗位详情逻辑
      console.log("跳转到岗位详情页面");
      this.$router.push({path: '/dw/jobDetail', query: {id: row.ID}})
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 重置到第一页
    },
  }
}
</script>

<style scoped>
.tag-input-wrapper {
  border: 1px solid #ccc;
  padding: 5px;
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tag {
  background-color: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.close {
  margin-left: 6px;
  cursor: pointer;
}
input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 100px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.p-6 {
  padding: 10px !important;
}

.hover-effect {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

.stat-card {
  @apply h-40 flex flex-col justify-between;
}

.chart-card {
  @apply border-0 bg-white rounded-lg shadow-sm;
}

.card-title {
  @apply text-lg font-semibold text-gray-800;
}

.status-tag {
  @apply px-3 py-1 rounded-full;
}

.advanced-search {
  @apply bg-gray-50 p-4 rounded;
}

.main-table {
  @apply border-0 shadow-lg;
}

:deep(.el-card__header) {
  @apply border-b-0 bg-gray-50;
}

.mb-6 {
  margin-bottom: 0.5rem !important;
}
</style>